@import "header";
@import "secondary-nav";
@import "footer";
body {
    color: #333;
    background-color: #eaeaea;
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 14px;
    background-color: #f9f9f9;
    min-width: 800px;
    font-family: -apple-system, BlinkMacSystemFont, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
*,
*:before,
*:after {
    box-sizing:border-box;
}

.content {
    width: 1000px;
    padding: 34px 50px 0 30px;
    background-color: #fff;
    font-size: 14px;
    vertical-align: top;
    margin: 0 auto;
    margin-top: 20px;
    .pagelist-wrapper {
        li {
            padding: 32px 0 20px;
            border-top: 1px solid #eaeaea;
            font-size: 0;
            a {
                text-decoration: none;
                cursor: pointer;
            }
            .item-cover {
                position: relative;
                display: inline-block;
                width: 150px;
                height: 150px;
                margin-right: 30px;
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
            .item-info {
                display: inline-block;
                width: 692px;
                vertical-align: top;
                font-size: 14px;
                overflow: hidden;
                .item-title {
                    display: block;
                    width: 100%;
                    font-size: 22px;
                    line-height: 1;
                    color: #259;
                    font-weight: 700;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .item-owner {
                    display: block;
                    margin-top: 10px;
                    color: #999;
                    line-height: 1;
                }
                .item-album {
                    position: relative;
                    margin-top: 20px;
                    font-size: 0;
                    .album-item {
                        display: inline-block;
                        width: 150px;
                        height: 150px;
                        margin-left: 10px;
                        &:first-child {
                            margin-left: 0;
                        }
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .hint {
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        height: 20px;
                        padding: 0 10px;
                        line-height: 20px;
                        font-size: 12px;
                        color: #fff;
                        background-color: rgba(0, 0, 0, .7);
                    }
                }
                .item-desc {
                    max-height: 84px;
                    padding: 0;
                    margin: 20px 0 0;
                }
            }
            .item-related {
                position: relative;
                display: block;
                margin: 10px 0 0;
                font-size: 12px;
                margin-bottom: 20px;
                .item-tags {
                    height: 22px;
                    padding-right: 300px;
                    font-size: 0;
                    overflow: hidden;
                    a {
                        display: inline-block;
                        height: 22px;
                        padding: 0 12px;
                        border: 1px solid #e3e4e6;
                        -webkit-border-radius: 11px;
                        -moz-border-radius: 11px;
                        border-radius: 11px;
                        margin-left: 10px;
                        color: #808388;
                        font-size: 12px;
                        text-align: center;
                        line-height: 22px;
                        vertical-align: middle;
                        &:hover {
                            background-color: #f5f6f8;
                        }
                    }
                }
                //          .has-tags {
                //              &::before {
                //                  content: " ";
                //                  display: inline-block;
                //                  width: 20px;
                //                  height: 20px;
                //                  background-image: url();
                //                  background-position: -103px 81px;
                //                  vertical-align: middle;
                //              }
                //          }
                .item-handler {
                    position: absolute;
                    top: 3px;
                    right: 0;
                    span {
                        color: #808388;
                    }
                }
            }
        }
    }
}

